import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Link } from 'react-router';

import * as Util from '../common/Util';
import * as RechargeActions from '../actions/RechargeActions';
import * as ConsumeActions from '../actions/ConsumeActions';

import {
  TabbedArea,
  TabPane
} from 'react-bootstrap';

import { pageSize } from '../config/Common';

import Pager from '../components/Pager';
import RechargeRecord from '../components/RechargeRecord';
import ConsumeRecord from '../components/ConsumeRecord';
import Container from '../components/Container';

class RecordApp extends React.Component {

  constructor () {
    super(); 

    this.state = {
      selectedTabKey : 2
    };

    this.consumePageIndex = 1;
    this.rechargePageIndex = 1;
  }

  static propTypes = {
    product: React.PropTypes.array.isRequired,
    dispatch: React.PropTypes.func.isRequired
  }

  fetchConsumeData (){
    let pIndex = this.consumePageIndex;
    let dataParam = {
        start : pIndex, 
        limit : pageSize
    };
    this.props.consumeAction.fetchConsumeRecord(dataParam);
  }

  fetchRechargeData (){
    let pIndex = this.rechargePageIndex;
    let dataParam = {
        start : pIndex, 
        limit : pageSize
    };
    this.props.rechargeAction.fetchRechargeRecord(dataParam);
  }

  getConsumePageEnabled(){
    let { consumeRecord } = this.props;
    let pageTotalCount = (this.consumePageIndex) * pageSize;
    let consumePageEnabled = false;
    if(consumeRecord && consumeRecord.results.length >= pageTotalCount){
      consumePageEnabled = true;
    }
    return consumePageEnabled;
  }

  getRechargePageEnabled(){
    let { rechargeRecord } = this.props;
    let pageTotalCount = (this.rechargePageIndex) * pageSize;
    let rechargePageEnabled = false;
    if(rechargeRecord && rechargeRecord.results && rechargeRecord.results.length >= pageTotalCount){
      rechargePageEnabled = true;
    }

    return rechargePageEnabled;
  }

  onConsumePageClick(){
    let pIndex = (this.consumePageIndex + 1);
    this.consumePageIndex = pIndex;

    this.fetchConsumeData();
  }

  onRechargePageClick(){
    let pIndex = (this.rechargePageIndex + 1);
    this.rechargePageIndex = pIndex;

    this.fetchRechargeData();
  }

  componentDidMount(){
    
    this.fetchConsumeData();

    //没有找到好的方法，暂时就用定时器的方式
    let timer = setInterval(function(){
      let { consume_record_status = 0 } = this.props.consumeRecord;
      if (consume_record_status === 1) {
        clearInterval(timer);
        this.fetchRechargeData();
      }
    }.bind(this), 100);

  }

  componentWillUnmount(){
    this.props.rechargeAction.resetRechargeRecord();
    this.props.consumeAction.resetConsumeRecord();
  }
  
  formatRecordData(){
    let { consumeRecord, rechargeRecord } = this.props;
    let { comsumeRecordResult = null, rechargeRecordResult = null } = {};
    if (consumeRecord && consumeRecord.results) {
      comsumeRecordResult = consumeRecord.results.slice(0, this.consumePageIndex * pageSize);
    }

    if(rechargeRecord && rechargeRecord.results){
      rechargeRecordResult = rechargeRecord.results.slice(0, this.rechargePageIndex * pageSize);
    }
    return { comsumeRecordResult, rechargeRecordResult };
  }


  handleTabSelect(index){
    this.setState({
      selectedTabKey : index
    });
  }

  render() {

    let { consumeRecord, rechargeRecord } = this.props;
    
    let { comsumeRecordResult, rechargeRecordResult } = this.formatRecordData();

    let consumePageEnabled = this.getConsumePageEnabled();

    let rechargePageEnabled = this.getRechargePageEnabled();
    
    return (
          <Container 
              isGoBack={true} 
              isHeader={true} 
              isFooter={false} 
              footerIndex={0} 
              headerTitle={"积分详情"}>

               <div className="product-container">
                  <TabbedArea activeKey={this.state.selectedTabKey} onSelect={this.handleTabSelect.bind(this)}>
                    <TabPane eventKey={1} tab="消费记录">
                      {
                        consumeRecord.consume_record_status === 0 && comsumeRecordResult.length === 0?
                        <div className="text-center padding-lg">
                          {consumeRecord.message}
                        </div> 
                        :
                        comsumeRecordResult && comsumeRecordResult.length > 0 ?
                        comsumeRecordResult.map((record, i) =>  
                            <ConsumeRecord record = { record } key={i}/>
                        )
                        :
                        <div className="text-center padding-lg">
                          暂无消费记录
                        </div> 
                      }

                      {
                        consumePageEnabled || comsumeRecordResult.length > 0 ?
                        <Pager 
                          onPageClick = {this.onConsumePageClick.bind(this)} 
                          enabled = {consumePageEnabled} 
                          status={consumeRecord.consume_record_status}>
                          点击加载更多
                        </Pager>
                        : null
                      }
                    </TabPane>

                    <TabPane eventKey={2} tab="充值记录">
                      {
                        rechargeRecord.recharge_record_status === 0 && rechargeRecordResult.length === 0 ?
                        <div className="text-center padding-lg">
                          {rechargeRecord.message}
                        </div> 
                        :
                        rechargeRecordResult && rechargeRecordResult.length > 0 ?
                        rechargeRecordResult.map((record, i) =>  
                            <RechargeRecord record = { record } key={i}/>
                        )
                        :
                        <div className="text-center padding-lg">
                          暂无充值记录
                        </div> 
                      }

                      {
                        rechargePageEnabled || rechargeRecordResult.length > 0 ?
                        <Pager 
                          onPageClick = {this.onRechargePageClick.bind(this)} 
                          enabled = {rechargePageEnabled} 
                          status = {rechargeRecord.recharge_record_status}>
                          点击加载更多
                        </Pager>
                        : null
                      }
                    </TabPane>
                  </TabbedArea>
               </div>
          </Container>
    );
  }
}

export default connect(state => ({
    rechargeRecord : state.rechargerecord,
    consumeRecord : state.consumerecord
}), dispatch => ({
    rechargeAction: bindActionCreators(RechargeActions, dispatch),
    consumeAction: bindActionCreators(ConsumeActions, dispatch)
}))(RecordApp);
